<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8" />
	<meta NAME="LANGUAGE" CONTENT="en-th" />
	<meta http-equiv="IMAGETOOLBAR" content="false" />
	<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
	<meta http-equiv="PRAGMA" content="NO-CACHE" />
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	<title>My Catalog</title>
	<h:outputStylesheet library="css" name="catalog.css"/>
	<h:outputScript library="javascript" name="pos.js" target="head"></h:outputScript>
</h:head>
<h:body>
	<h:form id="catalogForm" onkeypress="if(!notEnter(event))return false">
		<div id="headerContainer">
			<div id="headerBanner">My Catalog</div>
			<div id="headerRight">
				<div id="admin"><a href="#{request.contextPath}/admin">[Admin]</a></div>
			</div>
		</div>
		<div id="centerContianer">
			<div id="leftSideBar">
				<h:panelGrid columns="2" columnClasses="colsLeft,colsRight" width="100%">
					<h:panelGroup>
						<h:panelGrid>
							<rich:panelMenu id="menu" style="width:200px" itemMode="ajax" groupMode="client" groupExpandedLeftIcon="triangleUp" groupCollapsedLeftIcon="triangleDown" topGroupExpandedRightIcon="chevronUp"
								topGroupCollapsedRightIcon="chevronDown" itemLeftIcon="disc" expandSingle="true" itemChangeListener="#{catalogMenuBean.updateCurrent}">
								<rich:panelMenuItem name="hotItem" label="Hot Items" actionListener="#{catalogMenuBean.searchHotItem}">
									<f:ajax event="select" render="@form"></f:ajax>
								</rich:panelMenuItem>
								<c:forEach items="#{catalogMenuBean.catnode}" var="node1">
									<rich:panelMenuGroup name="#{node1.catid}" label="#{node1.name}" rendered="#{node1.cattype == 'G'}" render="menu">
										<c:forEach items="#{node1.childNode}" var="node2">
											<rich:panelMenuGroup name="#{node2.catid}" label="#{node2.name}" rendered="#{node2.cattype == 'G'}" render="menu">
												<c:forEach items="#{node2.childNode}" var="node3">
													<rich:panelMenuGroup name="#{node3.catid}" label="#{node3.name}" rendered="#{node3.cattype == 'G'}" render="menu">
														<c:forEach items="#{node3.childNode}" var="node4">
															<rich:panelMenuGroup name="#{node4.catid}" label="#{node4.name}" rendered="#{node4.cattype == 'G'}" render="menu">
																<ui:repeat items="#{node4.childNode}" var="node5">
																	<rich:panelMenuGroup name="#{node5.catid}" label="#{node5.name}" rendered="#{node5.cattype == 'G'}" render="menu">
																	</rich:panelMenuGroup>
																	<rich:panelMenuItem name="#{node5.catid}" label="#{node5.name}" rendered="#{node5.cattype == 'N'}" actionListener="#{catalogMenuBean.selectMenuItem}">
																		<f:ajax event="select" render="@form"></f:ajax>
																	</rich:panelMenuItem>
																</ui:repeat>
															</rich:panelMenuGroup>
															<rich:panelMenuItem name="#{node4.catid}" label="#{node4.name}" rendered="#{node4.cattype == 'N'}" actionListener="#{catalogMenuBean.selectMenuItem}">
																<f:ajax event="select" render="@form"></f:ajax>
															</rich:panelMenuItem>
														</c:forEach>
													</rich:panelMenuGroup>
													<rich:panelMenuItem name="#{node3.catid}" label="#{node3.name}" rendered="#{node3.cattype == 'N'}" actionListener="#{catalogMenuBean.selectMenuItem}">
														<f:ajax event="select" render="@form"></f:ajax>
													</rich:panelMenuItem>
												</c:forEach>
											</rich:panelMenuGroup>
											<rich:panelMenuItem name="#{node2.catid}" label="#{node2.name}" rendered="#{node2.cattype == 'N'}" actionListener="#{catalogMenuBean.selectMenuItem}">
												<f:ajax event="select" render="@form"></f:ajax>
											</rich:panelMenuItem>
										</c:forEach>
									</rich:panelMenuGroup>
									<rich:panelMenuItem name="#{node1.catid}" label="#{node1.name}" rendered="#{node1.cattype == 'N'}" actionListener="#{catalogMenuBean.selectMenuItem}">
										<f:ajax event="select" render="@form"></f:ajax>
									</rich:panelMenuItem>
								</c:forEach>
							</rich:panelMenu>
							<rich:panel header="Search">
								<h:panelGrid columns="2">
									<h:outputLabel value="Description" style="font:Tahoma;font-size:0.9em;"/>
									<h:inputText value="#{catalogMenuBean.keyworddesc}" style="font-size:1em;" size="15">
									</h:inputText>
									
									<h:outputLabel value="Price" style="font-size:0.9em;"/>
									<h:panelGroup>
										<h:inputText value="#{catalogMenuBean.keywordfromprice}" style="font-size:1em;" size="3" converter="javax.faces.Double">
										</h:inputText>
										<h:outputLabel value="-"></h:outputLabel>
										<h:inputText value="#{catalogMenuBean.keywordtoprice}" style="font-size:1em;" size="3" converter="javax.faces.Double">
										</h:inputText>
									</h:panelGroup>
									
									
									<h:outputLabel value="Height" style="font-size:0.9em;"/>
									<h:inputText value="#{catalogMenuBean.keywordheight}" style="font-size:1em;" size="10" converter="javax.faces.Double">
									</h:inputText>
									
									<h:outputLabel value="Length" style="font-size:0.9em;"/>
									<h:inputText value="#{catalogMenuBean.keywordlength}" style="font-size:1em;" size="10" converter="javax.faces.Double">
									</h:inputText>
									
									<h:outputLabel value="Depth" style="font-size:0.9em;"/>
									<h:inputText value="#{catalogMenuBean.keywordepth}" style="font-size:1em;" size="10" converter="javax.faces.Double">
									</h:inputText>
									<h:outputLabel value="&#160;"/>
								</h:panelGrid>
								<h:panelGrid columns="2">
									<h:commandButton value="Search">
										<f:ajax event="click" execute="@form" render="catalogForm" listener="#{catalogMenuBean.search}" />
									</h:commandButton>
									<h:commandButton value="Clear" disabled="#{catalogMenuBean.resultTitle != 'Search Results'}">
										<f:ajax event="click" execute="@form" render="catalogForm" listener="#{catalogMenuBean.clearsearch}" />
									</h:commandButton>
								</h:panelGrid>
							</rich:panel>
						</h:panelGrid>
					</h:panelGroup>
					<a4j:outputPanel ajaxRendered="true">
						<h:outputStylesheet>
					        .label {
					        font-weight: bold;
					        }
					        .rf-dg, .rf-dg-c{
					        border:none;
					        }
					        .pbody {
					        width: 100%;
					        }
					        .rowsSelect {
					        vertical-align:top;
					        }
					    </h:outputStylesheet>
						<div style="width: 100%; float: right; border-bottom: solid 1px #CCCCCC; margin-bottom: 2px;">
							<div style="float: left; padding-left: 10px;">
								<h:outputLabel value="#{catalogMenuBean.resultTitle}"></h:outputLabel>
							</div>
							<div style="float: right;">
								<h:panelGrid columns="3" columnClasses="rowsSelect">
									<h:panelGroup>
										<h:inputText id="rows" value="#{catalogMenuBean.rows}" size="2" maxlength="2" converter="javax.faces.Integer" onkeypress="if(notEnter(event))return false" style="width:2em;">
											<f:ajax event="change" listener="#{catalogMenuBean.changeRows}" render="catalogItem ds"/>
											<f:ajax event="keypress" listener="#{catalogMenuBean.changeRows}" render="catalogItem ds"/>
										</h:inputText>
										<h:outputLabel value="Records / page" style="font-size:0.7em;"/>
									</h:panelGroup>
									<rich:dataScroller for="slider" id="ds" />
								</h:panelGrid>
							</div>
						</div>
						<rich:panel id="catalogItem" style="border:0px;">
							<a4j:repeat rows="#{catalogMenuBean.rows}" value="#{catalogMenuBean.itemlist}" var="item" id="slider">
								<div class="itemcontainer">
									<div class="base">
										<div class="innerbase">
											<rich:panel style="height:280px; width:360px;">
												<f:facet name="header">
													<h:outputLabel value="#{item.item}" />
												</f:facet>
												<h:panelGrid columns="3" width="360" columnClasses="itemImageBase,verticalRule,infoBase">
													<h:panelGroup>
														<h:graphicImage url="/images/item/#{item.item}" styleClass="itemImage"></h:graphicImage>
													</h:panelGroup>
													<div style="border-left: 1px solid #CCCCCC; height: 190px;"></div>
													<h:panelGroup>
														<h:panelGrid>
															<h:outputLabel value="Description:"/>
															<h:outputLabel value="#{item.description}"/>
														</h:panelGrid>
														<h:panelGrid columns="2">
															<h:outputLabel value="Height:"/>
															<h:panelGroup>
																<h:outputLabel value="#{item.height}"/>
																<h:outputLabel value="m" rendered="#{item.height != null}"/>
															</h:panelGroup>
															
															<h:outputLabel value="Length:"/>
															<h:panelGroup>
																<h:outputLabel value="#{item.length}"/>
																<h:outputLabel value="m" rendered="#{item.length != null}"/>
															</h:panelGroup>
															
															<h:outputLabel value="Depth:"/>
															<h:panelGroup>
																<h:outputLabel value="#{item.depth}"/>
																<h:outputLabel value="m" rendered="#{item.depth != null}"/>
															</h:panelGroup>
															
															<h:outputLabel value="Price:"/>
															<h:outputLabel value="#{item.price}"/>
														</h:panelGrid>
													</h:panelGroup>
												</h:panelGrid>
											</rich:panel>
										</div>
									</div>
								</div>
							</a4j:repeat>
						</rich:panel>
					</a4j:outputPanel>
				</h:panelGrid>
			</div>
			<div id="mainContent"></div>
		</div>
	</h:form>
</h:body>
</html>